<template>
  <div class="menu-container">
    <div class="menu-bar-con">
      <button class="menu-bar-btn" @click="isOpenChange" v-bind:class="{'btn-active':isOpen}">
        <span class="icon">+</span>
      </button>
    </div>
    <span class="weui-badge weui-badge_dot" style="position:absolute;top:0em;right:0em;" v-if="showBadge"></span>
    <ul class="menu-item-list">
      <menu-item
        v-for="(item, itemIndex) in iconImgArr"
        :key="item.iconName"
        :radius="radius"
        :index="itemIndex"
        :angleCur="startAngle+angleStep*itemIndex"
        :animationDuration="animationDuration"
        :itemAnimationDelay="0 + (itemIndex * itemAnimationDelay)"
        :icon="item.icon || ('icon-'+item.iconName)"
        :iconSize="item.iconSize"
        :showItem="showItem"
        :isOpen="isOpen"
        :total="iconImgArr.length"
        :currentIndex="currentIndex"
        :showBadge="item.showBadge"
        v-on:showItemChange="showItemChange"
        v-on:isOpenChange="isOpenChange"
        v-on:animationCountIncrease=" (val) => {animationCountIncrease(val)}">
      </menu-item>
    </ul>
  </div>
</template>
<style lang="stylus" type="text/stylus">
  .menu-container
    user-select none
    border-radius 50%
    transition box-shadow .28s cubic-bezier(.4, 0, .2, 1)
    box-shadow 0 2px 5px 0 rgba(0, 0, 0, .26)
    padding 0
    margin 0
    box-sizing border-box
    -webkit-tap-highlight-color rgba(0, 0, 0, 0)
    .menu-bar-con
      .menu-bar-btn
        position absolute
        border-radius 50%
        width 50px
        height 50px
        z-index 1
        cursor pointer
        transition all .28s cubic-bezier(.4, 0, .2, 1)
        border none
        background-color #74a982
        color white
        outline none
        &.btn-active
          transform rotate(45deg)
        &:hover
          box-shadow 0 8px 17px 0 rgba(0, 0, 0, .2)
        .icon
          font-size 32px
          line-height 60%
          position relative
    .menu-item-list
      list-style-type none
</style>
<script type="text/ecmascript-6">
  import Vue from 'vue'
  import item from './Item/item.vue'

  export default {
    props: {
      startAngle: {
        default: 0
      },
      radius: {
        default: 160
      },
      itemAnimationDelay: {
        default: 0.04
      },
      animationDuration: {
        default: 0.5
      },
      endAngle: {
        default: 315
      },
      itemNum: {
        default: 8
      },
      iconImgArr: Array,
      showBadge: {
        default: false
      }
    },
    data() {
      return {
        showItem: true,
        isOpen: false,
        total: this.iconImgArr.length,
        count: 0,
        currentIndex: -1
      }
    },

    computed: {
      angleStep() {
        return (this.endAngle - this.startAngle) / (this.itemNum - 1)
      }
    },
    created() {
      //      把每个button的背景图片的class插入到html中,方便以后使用。
      let cssRule = ''
      this.iconImgArr.map((item) => {
        if (item.iconUrl) {
          cssRule += this.gennerateIconStyle(item)
        }
      })
      let style = document.createElement('style')
      style.type = 'text/css'
      style.innerHTML = cssRule
      document.head.appendChild(style)
    },

    methods: {
      // 产生icon的类
      gennerateIconStyle(icon) {
        let cssRule = '.icon-' + icon.iconName + '{' +
          'background-image: url(' + icon.iconUrl + ');' +
          'background-size: ' + icon.iconSize + '%; ' +
          '}\n'
        return cssRule
      },
      animationCountIncrease() {
        this.count++
        if (this.count === this.total) {
          this.isOpenChange()
          this.count = 0
        }
      },
      showItemChange(index) {
        this.showItem = false
        this.currentIndex = index
        this.$emit('on-click', index)
      },
      isOpenChange() {
        if (!this.isOpen && !this.showItem) {
          this.showItem = true
        }
        this.isOpen = !this.isOpen
      },
      setAmination() {
        let angleCur = this.startAngle

      }

    },
    components: {
      'menu-item': item

    }
  }
</script>

<style>
  @import '~weui/dist/style/weui.min.css';
</style>
